<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户信息'"></navtop>
        </div>
        <div class="userinfosContainer">
            <div class="vavtar">
                <img :src="avatarimg.avatar" alt=""/>
            </div>
            <div class="infoslist">
                <div>昵称：</div>
                <div>{{userinfos.username}}</div>
            </div>
            <div class="infoslist">
                <div>邮箱：</div>
                <div>{{userinfos.email==''?'未绑定':userinfos.email}}</div>
            </div>
            <div class="infoslist">
                <div>电话：</div>
                <div>{{userinfos.mobile==''?'未绑定':userinfos.mobile}}</div>
            </div>
            <div class="infoslist">
                <div>年龄：</div>
                <div>{{userinfos.age}}</div>
            </div>
            <div class="infoslist">
                <div>性别：</div>
                <div>{{userinfos.sex?'boy':'gril'}}</div>
            </div>
        </div>
    </div>
</template>


<script>
import navtop from "../navtop/nav.vue";
export default {
    data() {
        return {
            email: 1,
            userinfos: {},
            avatarimg:null
        };
    },
    components: {
        navtop
    },
    mounted: {
        //处理用户数据
        rebuld(data) {}
    },
    mounted() {
        console.log(this.$store.state.userinfos);

        this.userinfos = this.$store.state.userinfos;
        this.$ajax.get("/avatar").then(res => {
            ///////console.log(res.data);
            this.avatarimg = res.data.results.pop();
            //this.userinfo = res.data;
        });
    }
};
</script>


<style lang="scss" scoped>
.userinfosContainer {
    padding: 5px;
    .vavtar {
        width: 100%;
        height: 160px;
        display: flex;
        justify-content: center;
        img {
            width: 45%;
            height: 100%;
        }
    }
    .infoslist {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        padding: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        div:nth-child(1){
            width: 50%;
            text-align: right;
        }
        div:nth-child(2){
            width: 50%;
        }
    }
}
</style>